<template>
  <el-header style="width: 100%">
    <div class="left">
      <div class="title">大数据核心看板</div>
      <el-menu
        :default-active="getActive()"
        background-color="#409eff"
        active-text-color="#ffd04b"
        text-color="#fff"
        style="border: none"
        class="el-menu-demo"
        mode="horizontal"
        router
      >
      </el-menu>
    </div>
    <el-dropdown>
      <span class="el-dropdown-link">
        {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>帮助</el-dropdown-item>
        <el-dropdown-item @click.stop.native="logout" style="color: red"
          >退出</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>
<script>
// import {user_info} from "@/assets/js/api"
export default {
  data() {
    return {
      userName:null
    };
  },
  computed: {
    auth() {
      return this.$store.state.auth;
    },
  },
  mounted(){
    // this.getUserInfo()
  },
  methods: {
    // getUserInfo(){
    //   user_info().then(res=>{
    //     if(res.code==0){
    //       this.userName = res.user.realName;
    //     }
    //   })
    // },
    // 菜单高亮判断
    getActive() {
      // let action = "/" + this.$route.path.split("/")[1];
      // if ((action == "/users")) action += "/role";
      // else action += "/system";
      // return action
    },
    changeAuth(data) {
      this.$store.commit("setAuth", data);
    },
    logout() {
      window.location.href = "/ks-data-support/logout";
    },
  },
};
</script>
<style lang="scss" type="text/css" scoped>
.el-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  min-width: 1000px;
  padding-left: 0!important;
  border-bottom: #3C3D4E solid 2px;
}
.el-header,
.left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  color: #fff;
  width: 12%;
  .title {
    width: 100%;
    height: 60px;
    font-size: 20px;
    text-align: center;
    background-color: #3C3D4E;
    line-height: 60px;
  }
  .el-dropdown {
    color: #fff;
  }
  .el-menu-item {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
